<template>
    <div class="ele-body">
        <el-card shadow="never">

            <el-form :model="where" label-width="85px" class="ele-form-search">
                <el-row :gutter="5">

                    <el-col :md="4" :sm="12">
                        <el-form-item label="设备类型：">
                            <el-select v-model="where.device_type" placeholder="全部" size="small" clearable>
                                <el-option
                                    v-for="item in extra.devices"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :md="4" :sm="12">
                        <el-form-item label="姓名：" label-width="60px">
                            <el-input v-model="where.name" placeholder="请输入姓名搜索"></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :md="4" :sm="12">
                        <el-form-item label="人脸库：">
                            <el-select v-model="where.face_group_id" placeholder="请选择" multiple>
                                <el-option-group
                                    v-for="group in extra.face_stores"
                                    :key="group.label"
                                    :label="group.label">
                                    <el-option
                                        v-for="item in group.options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        >
                                        <span v-html="item.label" class="pl-15"></span>
                                    </el-option>
                                </el-option-group>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :md="4" :sm="12">
                        <el-form-item label="任务类型：">
                            <el-select v-model="where.mode" placeholder="全部" size="small" clearable>
                                <el-option key="1" label="普通监控" value="1"></el-option>
                                <el-option key="2" label="布控告警" value="2"></el-option>
                                <el-option key="3" label="考勤任务" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                </el-row>

                <el-row :gutter="5">

                    <el-col :md="6" :sm="12">
                        <el-form-item label="时间范围：">
                            <el-date-picker
                                v-model="where.capture_time"
                                type="datetimerange"
                                range-separator="~"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                size="small" 
                                >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>

                    <el-col :md="12" :sm="12">
                        <el-form-item>
                            <div class="datetime-sel">
                                <el-button-group>
                                    <el-button size="small" @click="dateFilter('1h')">最近一小时</el-button>
                                    <el-button size="small" @click="dateFilter('1d')">最近一天</el-button>
                                    <el-button size="small" @click="dateFilter('3d')">最近3天</el-button>
                                    <el-button size="small" @click="dateFilter('7d')">最近7天</el-button>
                                </el-button-group>
                            </div>
                            <div class="search-btns">
                                <el-button size="small" type="primary" @click="advanceFilter">高级筛选</el-button>
                                <el-button size="small" type="primary" @click="filter">查询</el-button>
                                <el-button size="small" type="primary" @click="exportImage">导出图片</el-button>
                                <el-button size="small" type="primary" @click="exportData">导出数据</el-button>
                            </div>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>

            <el-form :model="where" v-show="showAdvanceFilter" label-width="60px" class="ele-form-search">
                <el-row :gutter="5">
                    <el-col :md="3" :sm="12">
                        <el-form-item label="性别:">
                            <el-select v-model="where.attr_gender" placeholder="全部" size="small" clearable>
                                <el-option key="1" label="男" value="1"></el-option>
                                <el-option key="2" label="女" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="4" :sm="12">
                        <el-form-item label="年龄:">
                            <el-select v-model="where.attr_age" placeholder="全部" size="small" clearable>
                                <el-option 
                                    v-for="item in extra.agelist"
                                    :key="item.id" 
                                    :label="item.name" 
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="3" :sm="12">
                        <el-form-item label="口罩:">
                            <el-select v-model="where.attr_mask" placeholder="全部" size="small" clearable>
                                <el-option key="1" label="有" value="1"></el-option>
                                <el-option key="2" label="无" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="4" :sm="12">
                        <el-form-item label="上装类型:" label-width="85px">
                            <el-select v-model="where.up_clothing" placeholder="全部" size="small" clearable>
                                <el-option 
                                    v-for="item in extra.up_clothing"
                                    :key="item.id" 
                                    :label="item.name" 
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="5" :sm="12">
                        <el-form-item label="胡子:">
                            <el-select v-model="where.attr_beard" placeholder="全部" size="small" clearable class="inline-sel w50">
                                <el-option key="1" label="有" value="1"></el-option>
                                <el-option key="2" label="无" value="2"></el-option>
                            </el-select>

                            <el-select v-model="where.beard_type" placeholder="全部" size="small" clearable class="inline-sel">
                                <el-option key="1" label="络腮胡" value="1"></el-option>
                                <el-option key="2" label="小胡子" value="2"></el-option>
                                <el-option key="3" label="胡茬" value="3"></el-option>
                                <el-option key="4" label="其它" value="4"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="3" :sm="12">
                        <el-form-item label="肤色:">
                            <el-select v-model="where.attr_race" placeholder="全部" size="small" clearable>
                                <el-option key="1" label="白色" value="1"></el-option>
                                <el-option key="2" label="黑色" value="2"></el-option>
                                <el-option key="3" label="黄色" value="3"></el-option>
                                <el-option key="4" label="棕色" value="4"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="5">
                    <el-col :md="3" :sm="12">
                        <el-form-item label="眼镜:">
                            <el-select v-model="where.attr_glasses" placeholder="全部" size="small" clearable>
                                <el-option key="1" label="有" value="1"></el-option>
                                <el-option key="2" label="无" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="4" :sm="12">
                        <el-form-item label="墨镜:">
                            <el-select v-model="where.black_glasses" placeholder="全部" size="small" clearable>
                                <el-option key="1" label="有" value="1"></el-option>
                                <el-option key="2" label="无" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="3" :sm="12">
                        <el-form-item label="发型:">
                            <el-select v-model="where.hair_style" placeholder="全部" size="small" clearable>
                                <el-option 
                                    v-for="item in extra.hair_style"
                                    :key="item.id" 
                                    :label="item.name" 
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="4" :sm="12">
                        <el-form-item label="上装颜色:" label-width="85px">
                            <el-select v-model="where.up_clothing_color" placeholder="全部" size="small" clearable>
                                <el-option 
                                    v-for="item in extra.up_clothing_color"
                                    :key="item.id" 
                                    :label="item.name" 
                                    :value="item.id"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="5" :sm="12">
                        <el-form-item label="帽子:">
                            <el-select v-model="where.cap" placeholder="全部" size="small" clearable class="inline-sel w50">
                                <el-option key="1" label="有" value="1"></el-option>
                                <el-option key="2" label="无" value="2"></el-option>
                            </el-select>

                            <el-select v-model="where.cap_style" placeholder="全部" size="small" clearable class="inline-sel">
                                <el-option key="1" label="白色" value="1"></el-option>
                                <el-option key="2" label="黑色" value="2"></el-option>
                                <el-option key="3" label="红白色" value="3"></el-option>
                                <el-option key="4" label="其它" value="4"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :md="3" :sm="12">
                        <el-form-item label="打电话:" label-width="85px">
                            <el-select v-model="where.callphone" placeholder="全部" size="small" clearable>
                                <el-option key="1" label="有" value="1"></el-option>
                                <el-option key="2" label="无" value="2"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <el-row :gutter="15" v-loading="loading">
                <el-col v-for="(item,index) in data" :key="index" :md="6" :sm="8" :xs="12">
                    <div @click="showProfile(item)">
                    <el-card class="project-list-item" shadow="hover">
                        <div class="project-list-cover">
                            <img :src="item.imgpath" alt=""/>
                        </div>
                        <div class="project-list-body">
                            <div class="project-list-desc">时间：{{ item.capture_time }}</div>
                            <div class="project-list-desc">位置：{{ item.name }}</div>
                        </div>
                    </el-card>
                    </div>
                </el-col>
            </el-row>

            <div class="project-lis-pageination">
                <el-pagination 
                    :current-page="page.page" 
                    :page-size="page.limit" 
                    :total="count" 
                    :background="true"
                   @size-change="d=>(page.limit=d)&&query()" 
                   @current-change="d=>(page.page=d)&&query()"
                   :pager-count="5"
                    :page-sizes="[30, 50, 100]"
                    layout="total, prev, pager, next, sizes"/>
            </div>

        </el-card>
    </div>
</template>

<script>
export default {
    name: "Comparison",

    data() {
        return {
            loading: true,
            loading_form: false,
            where: {
                capture_time: ['2021-08-10 12:00:00', '2021-09-11 08:00:00']
            },
            page: {page: 1, limit: 10},  // 分页参数
            count: 0,                    // 数据总数

            showEdit: false,             // 是否显示编辑弹窗
            editForm: {},                // 编辑弹窗数据

            showAdvanceFilter: false,
            extra: {
                devices: [
                    { value: "1", label: "对比服务器" },
                    { value: "2", label: "人脸闸机" },
                ],
                face_stores: [
                    {
                        label: '热门城市',
                        options: [{
                            value: 'Shanghai',
                            label: '上海'
                        }, {
                            value: 'Beijing',
                            label: '北京'
                        }]
                    }, 
                    {
                        label: '城市名',
                        options: [{
                            value: 'Chengdu',
                            label: '成都'
                        }, {
                            value: 'Shenzhen',
                            label: '深圳'
                        }, {
                            value: 'Guangzhou',
                            label: '广州'
                        }, {
                            value: 'Dalian',
                            label: '大连'
                        }]
                    }
                ],
                agelist: [
                    { id: 1, name: "小孩（<15岁）", value: "lt-15"},
                    { id: 2, name: "青少年（15-20岁）", value: "15-20"},
                    { id: 3, name: "青年（20-30岁）", value: "20-30"},
                    { id: 4, name: "中青年（30-35岁）", value: "30-35"},
                    { id: 5, name: "中年（35-45岁）", value: "35-45"},
                    { id: 6, name: "中老年（45-55岁）", value: "45-55"},
                    { id: 7, name: "老年（>55岁）", value: "gt-55"},
                ],
                up_clothing: [
                    { id: 1, name: "背心"},
                    { id: 2, name: "T恤"},
                    { id: 3, name: "衬衫"},
                    { id: 4, name: "罩衫"},
                    { id: 5, name: "连衣裙"},
                    { id: 6, name: "卫衣"},
                    { id: 7, name: "夹克"},
                    { id: 8, name: "毛衣"},
                    { id: 9, name: "西装"},
                    { id: 10, name: "马甲"},
                    { id: 11, name: "大衣"},
                    { id: 12, name: "羽绒服"},
                    { id: 13, name: "牛仔衣"},
                    { id: 14, name: "阿拉伯男士长袍"},
                    { id: 15, name: "阿拉伯女士罩袍"}
                ],
                hair_style: [
                    { id: 1, name: "光头"},
                    { id: 2, name: "秃头"},
                    { id: 3, name: "平头"},
                    { id: 4, name: "短发"},
                    { id: 5, name: "齐肩短发"},
                    { id: 6, name: "披发"},
                    { id: 7, name: "束发"}
                ],
                up_clothing_color: [
                    { id: 1, name: "黑色" },
                    { id: 2, name: "白色" },
                    { id: 3, name: "灰色" },
                    { id: 4, name: "红色" },
                    { id: 5, name: "蓝色" },
                    { id: 6, name: "黄色" },
                    { id: 7, name: "橙色" },
                    { id: 8, name: "棕色" },
                    { id: 9, name: "绿色" },
                    { id: 10, name: "紫色" },
                    { id: 11, name: "青色" },
                    { id: 12, name: "粉色" },
                    { id: 13, name: "条纹" },
                    { id: 14, name: "格纹" },
                    { id: 15, name: "花纹" }
                ]
            },
            data: []
        };
    },

    mounted() {},

    created() {
        this.reload();
    },

    methods: {
        advanceFilter() {
            if (this.showAdvanceFilter) {
                this.showAdvanceFilter = false;
            } else {
                this.showAdvanceFilter = true;
            }
        },

        dateFilter(type) {
            this.reload({ page: 1, daterange: type })
        },

        filter() {
            this.reload({ page: 1});
        },

        exportImage() {},

        exportData() {
            this.$confirm('确定要导出数据吗?', '提醒', {type: 'info'}).then(() => {
                const loading = this.$loading({lock: true});
                this.$http.post('/api/admin/security/comparison/export', this.table.where, {responseType: 'blob'}).then(res => {
                    loading.close();
                    if (res.status == 200) {

                        let blob = new Blob([res.data], {
                            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'
                        });

                        let objectUrl = URL.createObjectURL(blob);
                        let link = document.createElement("a");
                        let fname = `对比记录列表`;
                        link.href = objectUrl;
                        link.setAttribute("download", fname);
                        document.body.appendChild(link);
                        link.click();
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).catch(e => {
                    loading.close();
                    this.$message.error(e.message);
                });
            }).catch(() => 0);
        },

        reload(reset = {}) {
            let params = Object.assign(reset, this.page, this.where);
            this.$http.post('/api/admin/security/comparison', params).then(res => {
                this.loading = false;
                if (res.data.code == 0) {
                    this.data = res.data.data;
                    this.count = res.data.count;
                } else {
                    this.$message.error(res.data.data.msg);
                }
            }).catch(e => {
                this.loading = false;
                this.$message.error(e.message);
            });
        },

        showProfile(item) {
            this.loading_form = true;
            this.$http.request('/api/admin/security/quickshot/preview', {params: {id: item.id}}).then(res => {
                this.loading_form = false;
                if (res.data.code == 0) {
                    this.editForm = Object.assign({}, item);
                    this.showEdit = true;
                    this.editForm = res.data.data;
                } else {
                    this.$message.error(res.data.msg);
                }
            }).catch(e => {
                this.loading_form = false;
                this.$message.error(e.message);
            });
        },
    },
};
</script>

<style>
.datetime-sel, .search-btns {
    margin: 0 10px;
    float: left;
}
.inline-sel {
    float: left;
    width: 150px;
}
.w50 {
    width: 100px;
    margin-right: 10px;
}
.pl-15 {
    padding-left: 15px;
}
.datetime-sel, .search-btns {
    margin: 0 10px;
    float: left;
}
.inline-sel {
    float: left;
    width: 150px;
}
.w50 {
    width: 100px;
    margin-right: 10px;
}

.project-list-item {
    margin-bottom: 15px;
    border: 1px solid #e8eaec;
    padding: 5px;
    list-style-type: none;
    margin: 5px;
    background: #f2f6fc;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
    box-shadow: 0 1px 1px 0 rgb(0 0 0 / 10%);
}

.project-list-cover {
    float: left;
    width: 35%;
}

.project-list-cover > img {
    width: 100px;
    height: 100px;
    display: block;
    object-fit: cover;
}

.project-list-body {
    margin-bottom: 15px;
}

.project-list-desc {
    margin-top: 6px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.project-lis-pageination {
    margin-top: 20px;
}

.project-box {
    position: absolute;
    height: 100%;
    padding: 5px 15px;
}

.project-footer-btns {
    height: 50px;
    position: absolute;
    bottom: -10px;
    left: 10px;
}
</style>
